<template>
    <div class="user-info-form asset-info-form">
        <el-form label-width="150px" :model="videoConfigForm" :rules="videoConfigFormRules" ref="videoConfigForm" @submit.native.prevent>
            <el-form-item label="userId：" prop="userId">
                <el-input placeholder="请输入userId" v-model="videoConfigForm.userId"></el-input>
            </el-form-item>
            <el-form-item label="电话号码：" prop="phoneNumber">
                <el-input placeholder="请输入电话号码" v-model="videoConfigForm.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="设备类型：" prop='equiptType'>
                <el-select v-model="videoConfigForm.equiptType">
                    <el-option
                        v-for="item in equiptTypeList"
                        :key="item.dictKey"
                        :label="item.dictValue"
                        :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="appKey：" prop="videoAppKey">
                <el-input placeholder="请输入appKey" v-model="videoConfigForm.videoAppKey"></el-input>
            </el-form-item>
            <el-form-item label="secretKey：" prop="videoSecretKey">
                <el-input placeholder="请输入secretKey" v-model="videoConfigForm.videoSecretKey"></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remarks">
                <el-input placeholder="请输入备注" v-model="videoConfigForm.remarks"></el-input>
            </el-form-item>
            <el-form-item label-width="0" class="verifyidentity-button">
                <el-button @click.stop="closeFun" round>取消</el-button>
                <el-button type="primary" @click="saveVideoInfo('videoConfigForm')" round>保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { getDictByCode } from '@/api/dic'
import { updateAuth } from '@/api/sysConfig'

export default {
    name: 'VideoConfigInfo',
    props: {
        configInfo: {
            type: Object
        },
        closeFun: {
            type: Function,
            required: true
        },
    },
    data() {
        return {
            // 设备类型选项
            equiptTypeList: [],
            // 表单数据
            videoConfigForm: {
                id: '',
                userId: '', // userId
                phoneNumber: '', // 电话号码
                equiptType: '', // 设备类型
                videoAppKey: '', // appKey
                videoSecretKey: '', // secretKey
                remarks: '' // 备注
            },
            // 表单校验
            videoConfigFormRules: {
                userId: [
                    { required: true, message: '请输入userId', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' }
                ],
                equiptType: [
                    { required: true, message: '请选择设备类型', trigger: 'change' }
                ],
                videoAppKey: [
                    { required: true, message: '请输入appKey:', trigger: 'blur' }
                ],
                videoSecretKey: [
                    { required: true, message: '请输入secretKey', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        let that = this

        that.getEquiptTypeList(() => {
            // 如果有历史数据，回显
            if(that.configInfo && that.configInfo.id) {
                that.videoConfigForm.id = that.configInfo.id
                that.videoConfigForm.userId = that.configInfo.userId
                that.videoConfigForm.phoneNumber = that.configInfo.phoneNumber
                that.videoConfigForm.equiptType = String(that.configInfo.equiptType)
                that.videoConfigForm.videoAppKey = that.configInfo.appKey
                that.videoConfigForm.videoSecretKey = that.configInfo.secretKey
                that.videoConfigForm.remarks = that.configInfo.remarks
            }
        })
    },
    methods: {
        // 获取设备类型
        getEquiptTypeList(callback) {
            let that = this
            getDictByCode({code: 33}).then(res => {
                that.equiptTypeList = res.data.dictValueObj
                that.$nextTick(() => {
                    if(callback) {
                        callback()
                    }
                })
            })
        },
        // 保存
        saveVideoInfo(formName) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            let type = 1
            let parames = {}
            // 校验表单
            that.$refs[formName].validate((valid) => {
                if(valid) {
                    parames = {
                        id: that.videoConfigForm.id,
                        organizationId : 0,
                        equiptType: that.videoConfigForm.equiptType,
                        userId: that.videoConfigForm.userId,
                        phoneNumber: that.videoConfigForm.phoneNumber,
                        remarks: that.videoConfigForm.remarks,
                        videoAppKey: that.videoConfigForm.videoAppKey,
                        videoSecretKey: that.videoConfigForm.videoSecretKey
                    }
                    // 调用保存接口
                    updateAuth(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            // 关闭弹框
                            that.closeFun(true)
                        } else {
                            that.$message({
                                message: '保存失败！',
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>
